<!--
*******************************************************************************
 * Copyright © 2017-2018 VMware, Inc. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
 * in compliance with the License. You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under the License
 * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
 * or implied. See the License for the specific language governing permissions and limitations under
 * the License.
 *
 * @author: Shengqi Wang, <wshengqi@vmware.com>
 *******************************************************************************
 -->
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Rules Engine</title>
	<link href="/css/ruleengine.css" rel="stylesheet">
</head>

<body>
	<!--  manage-stream-list section start  -->

	<div id="manage-stream-list">

		<div class="panel panel-success">
			<div class="panel-heading">
				<h3 class="panel-title">Streams</h3>
			</div>
			<div class="panel panel-default" style="border:none;outline:none;margin:0;">
				<div class="panel-heading" style="padding:5px 2px;">
					<button type="button" class="btn btn-danger" onclick="orgEdgexFoundry.supportRuleEngine.deleteStreamAndRule('stream');">
						<i class="fa fa-trash-o" aria-hidden="true"></i>&nbsp;Delete
					</button>
					<button type="button" class="btn btn-success" onclick="orgEdgexFoundry.supportRuleEngine.toAddStream();">
						<i class="fa fa-plus" aria-hidden="true"></i>&nbsp;Add Stream
					</button>
				</div>
			</div>

			<div class="panel-body" style="padding:0;">
				<table class="table table-responsive table-hover table-striped">
					<thead>
						<tr class="active">
							<th></th>
							<th>#</th>
							<th>Name</th>
							<th>Details</th>
						</tr>
					</thead>
					<tbody></tbody>
					<tfoot>
						<tr align="center">
							<td colspan=6>No Data.</td>
						</tr>
					</tfoot>
				</table>
			</div>
		</div>

	</div>
	<!-- manage-stream-list section end -->

	<!-- add new rule section start -->
	<div id="manage-rules-list">

		<div class="panel panel-success">
		  <div class="panel-heading">
		    <h3 class="panel-title">Rules</h3>
		  </div>
		  <div class="panel panel-default" style="border:none;outline:none;margin:0;">
		    <div class="panel-heading" style="padding:5px 2px;">
				<button type="button" class="btn btn-danger" onclick="orgEdgexFoundry.supportRuleEngine.deleteStreamAndRule('rule');">
					<i class="fa fa-trash-o" aria-hidden="true"></i>&nbsp;Delete
				</button>
				<button type="button" class="btn btn-success" onclick="orgEdgexFoundry.supportRuleEngine.toAddRule();">
					<i class="fa fa-plus" aria-hidden="true"></i>&nbsp;Add Rule
				</button>
				<button type="button" class="btn btn-primary" onclick="orgEdgexFoundry.supportRuleEngine.ruleOperation('start');">
					<i class="fa fa-play-circle-o" aria-hidden="true"></i>&nbsp;Start
				</button>
				<button type="button" class="btn btn-warning" onclick="orgEdgexFoundry.supportRuleEngine.ruleOperation('stop');">
					<i class="fa fa-pause-circle-o" aria-hidden="true"></i>&nbsp;Stop
				</button>
				<button type="button" class="btn btn-info" onclick="orgEdgexFoundry.supportRuleEngine.ruleOperation('restart');">
					<i class="fa fa-history" aria-hidden="true"></i>&nbsp;Restart
				</button>
		    </div>
		  </div>

			<div class="panel-body" style="padding:0;">
				<table class="table table-responsive table-hover table-striped">
					<thead>
					<tr class="active">
						<th></th>
						<th>#</th>
						<th>Id</th>
						<th>Status</th>
						<th>Rule Details</th>
						<th>Status Details</th>
					</tr>
					</thead>
					<tbody></tbody>
					<tfoot>
					<tr align="center">
						<td colspan=6>No Data.</td>
					</tr>
					</tfoot>
				</table>
			</div>
		</div>

	</div>
	<!-- add new rule section end -->

	<div class="modal fade" id="ruleengine_model" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
					<h4 class="modal-title">Stream Details</h4>
				</div>
				<div class="modal-body" id="ruleengine_paramsBox">
					<pre id="json-renderer"></pre>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal"><span aria-hidden="true"></span>Close</button>
					<button type="button" class="btn btn-success" data-dismiss="modal" onclick="orgEdgexFoundry.supportRuleEngine.addStream();"><span aria-hidden="true"></span>Save</button>
				</div>
			</div>
		</div>
	</div>

	<div class="modal fade" id="ruleengine_addrules_model" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog modal-lg" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
					<h4 class="modal-title">Create a Rule</h4>
				</div>
				<div class="modal-body" id="ruleengine_addrules_paramsBox">
					<div class="panel-body" style="padding:0;">
						<form class="edgex-support-ruleengine-form form-horizontal">
							<div class="form-group">
								<label class="col-md-2 control-label">ID</label>
								<div class="col-md-8">
									<input type="text" class="form-control" id="ruleid" name="id" placeholder="ID is the unique identification">
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-2 control-label">Sql</label>
								<div class="col-md-8">
									<textarea class='form-control' id='rule_sqlinput' rows='4' placeholder="rule's sql,like SELECT * FROM demo"></textarea>
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-2 control-label">Actions</label>
								<div class="col-md-8">
									<select title="select actions" id="actions" name="actions" class='selectpicker show-tick form-control' multiple data-live-search='false'>
										<option value="rest">Send the result to a Rest HTTP server.</option>
										<option value="mqtt">Send the result to an MQTT broker.</option>
										<option value="edgex">Send the result to EdgeX message bus.</option>
										<option value="log">Send the result to log file.</option>
									</select>
								</div>
							</div>

							<div id="rest_action_tab">
								<hr width="100%" color="#987cb9" size=1>
								<div id="rest_tabs">

								</div>
								<button type="button" class="btn btn-success" onclick="orgEdgexFoundry.supportRuleEngine.addRestTab();">
									<i class="fa fa-plus" aria-hidden="true"></i>&nbsp;Add another Rest HTTP Server
								</button>
							</div>

							<div id="mqtt_action_tab">
								<hr width="100%" color="#987cb9" size=1>
								<div id="mqtt_tabs">

								</div>
								<button type="button" class="btn btn-success" onclick="orgEdgexFoundry.supportRuleEngine.addMqttTab();">
									<i class="fa fa-plus" aria-hidden="true"></i>&nbsp;Add another MQTT broker
								</button>
							</div>

							<div id="edgex_action_tab">
								<hr width="100%" color="#987cb9" size=1>
								<div id="edgex_tabs">

								</div>
								<button type="button" class="btn btn-success" onclick="orgEdgexFoundry.supportRuleEngine.addEdgeXTab();">
									<i class="fa fa-plus" aria-hidden="true"></i>&nbsp;Add another EdgeX message bus
								</button>
							</div>
						</form>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal"><span aria-hidden="true"></span>Close</button>
					<button type="button" class="btn btn-success" onclick="orgEdgexFoundry.supportRuleEngine.addRules();"><span aria-hidden="true"></span>Save</button>
				</div>
			</div>
		</div>
	</div>
</body>
<script src="/js/pages/ruleengine.js"></script>

</html>
